import React, { useState } from 'react';
import {
    PieChartOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { HomeRoute } from '../../router/router.ts';
import { NavLink, Outlet } from 'react-router-dom';
import Title from '../../components/Title/title.js'

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label?: React.ReactNode,
    key?: React.Key,
    path?: string,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        path,
        children,
        label:
            <NavLink to={path}>{label}</NavLink>
        ,
    } as MenuItem;
}

const RoutesHome = (arr: any): MenuItem[] => {
    return arr.map((item: any) => {
        return getItem(item.title, item.id, item.path, <PieChartOutlined />);
    });
};
const siderStyle: React.CSSProperties = {
    overflow: 'auto',
    height: '100vh',
    position: 'fixed',
    insetInlineStart: 0,
    top: 0,
    bottom: 0,
    scrollbarWidth: 'thin',
    scrollbarColor: 'unset',
    background:"#fff"
  };

const App: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout>
            <Sider style={siderStyle}>
                <img src="https://www.chuangkit.com/distsaas/img/new-web-logo.edf233f1.svg" alt="" className='logo' />
                <Menu theme="light" defaultSelectedKeys={['0']} mode="inline" items={RoutesHome(HomeRoute)} />
            </Sider>
            <Layout>
                <Header style={{  background: colorBgContainer, position: "fixed", zIndex: "999", width: "90%", left: "11.5%" }} >
                    <Title></Title>
                </Header>
                <Content style={{ overflow: "hidden", marginLeft: "12%", marginTop: "4%", background: "#fff" }}>
                    <div>
                        <Outlet />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }} >
                </Footer>
            </Layout>
        </Layout>
    );
};

export default App;